2018.6.11 星期四 14:25

编写高质量的代码

编写高质量代码.pdf
代码整洁之道.pdf

## html

## css
选择器选择/性能

## JavaScript

优雅注释

性能优化

高性能网站建设指南.pdf

原理

# [021-D 如何提升页面渲染效率]:
Web页面背后的工作原理都是一样的：
用户输入网址
浏览器加载HTML/CSS/JS，图片资源等
浏览器将结果绘制成图形
用户通过鼠标，键盘等与页面交互

宽带网速, DNS服务器的响应速度, 服务器的处理能力, 数据库性能, 路由转发, 浏览器处理能力

# [010-D 六个好方法缩短你的网页加载时间]:
图片优化, 尝试CDN加速.缓存, 压缩, 简洁的代码, 检查你的Web主机

概述

传输层面：减少请求数，降低请求量
执行层面：减少重绘&回流

## 减少请求数
① 合并样式、脚本文件
② 合并背景图片
③ CSS3图标、Icon Font

## 降低请求量
① 开启GZip
② 优化静态资源，jQuery->Zepto、阉割IScroll、去除冗余代码
③ 图片无损压缩
④ 图片延迟加载
⑤ 减少Cookie携带

## 很多时候，我们也会采用类似“时间换空间、空间换时间”的做法，比如：
① 缓存为王，对更新较缓慢的资源&接口做缓存（浏览器缓存、localsorage、application cache这个坑多）
② 按需加载，先加载主要资源，其余资源延迟加载，对非首屏资源滚动加载
③ fake页技术，将页面最初需要显示Html&Css内联，在页面所需资源加载结束前至少可看，理想情况是index.html下载结束即展示（2G 5S内）
④ CDN

资源缓存

资源缓存是为二次请求加速，比较常用的缓存技术有：
① 浏览器缓存
② localstorage缓存
③ application缓存
Hybrid载入
服务器资源合并
$_PS: 离线缓存

### 浏览器缓存
只要服务器配置，浏览器本身便具有缓存机制，如果要使用浏览器机制作缓存，势必关心一个何时更新资源问题：
时间戳更新，MD5时代，seed.js时代

渲染优化

① 页面滚动
② javascript交互
③ 动画
④ 内容变化
⑤ 属性计算（求元素的高宽）

# [026-D 前端性能优化——桌面浏览器前端优化策略]:

一、网络加载类

1．减少HTTP资源请求次数
尽可能合并静态资源图片、JavaScript或CSS代码
2．减小HTTP请求大小
压缩优化，移除注释/无用代码
3．将CSS或JavaScript放到外部文件中，避免使用<style>或<script>标签直接引入
在HTML文件中引用外部资源可以有效利用浏览器的静态资源缓存，但有时候在移动端页面CSS或JavaScript比较简单的情况下为了减少请求，也会将CSS或JavaScript直接写到HTML里面
14．缩小favicon.ico并缓存
15．推荐使用异步JavaScript资源
16．消除阻塞渲染的CSS及JavaScript
17．避免使用CSS import引用加载CSS

4．避免页面中空的href和src
仍会将href属性或src属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程

5．为HTML指定Cache-Control或Expires
避免频繁向服务器端发送请求
6．合理设置Etag和Last-Modified
对于未修改的文件，静态资源服务器会向浏览器端返回304，让浏览器从缓存中读取文件，减少Web资源下载的带宽消耗并降低服务器负载。
7．减少页面重定向
一次重定向大约需要600毫秒的时间开销

13．减少Cookie的大小并进行Cookie隔离
对于静态资源，尽量使用不同的域名来存放，因为Cookie默认是不能跨域的，这样就做到了不同域名下静态资源请求的Cookie隔离

11．使用可缓存的AJAX
12．使用GET来完成AJAX请求
使用XMLHttpRequest时，浏览器中的POST方法发送请求首先发送文件头，然后发送HTTP正文数据。而使用GET时只发送头部，所以在拉取服务端数据时使用GET请求效率更高。

8．使用静态资源分域存放来增加下载并行数
利用CDN网络加快同一个地理区域内重复静态资源文件的响应下载速度，缩短资源请求时间。
9．使用静态资源CDN来存储文件
浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的，因此可以
10．使用CDN Combo下载传输内容
在CDN服务器端将多个文件请求打包成一个文件的形式来返回的技术

二、页面渲染类

3．不要在HTML中直接缩放图片
会导致页面内容的重排重绘，此时可能会使页面中的其他操作产生卡顿

5. 尽量避免使用<table>、<iframe>等慢元素
渲染树全部生成完并一次性绘制到页面上的
尽量使用异步的方式动态添加iframe，因为iframe内资源的下载进程会阻塞父页面静态资源的下载与CSS及HTML DOM的解析。
7．避免使用CSS表达式或CSS滤镜
解析渲染速度是比较慢的

1. 把CSS资源引用放到HTML文件顶部
浏览器可以优先下载CSS并尽早完成页面渲染
2．JavaScript资源引用放到HTML文件底部
可以防止JavaScript的加载和解析执行对页面渲染造成阻塞。由于JavaScript资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞HTML DOM解析和CSS渲染的过程。
4．减少DOM元素数量和深度
浏览器解析DOM并绘制到浏览器中所花的时间就越长
6．避免运行耗时的JavaScript
会阻塞浏览器构建DOM树、DOM渲染树、渲染页面

资源加载

### 资源预加载
### 资源懒加载
### 按需加载
### 缓存

## CSS 方面
### CSS Sprite
### 图片格式选择/加载
### GPU加速
### 避免重排重绘

## JS方面

### DOM操作

15:08